<script setup>

import { Promotion } from '@element-plus/icons-vue'
import { RouterLink, RouterView } from "vue-router";
import { MoreFilled ,CircleCheck} from "@element-plus/icons-vue";
import request from '/@/utils/request';
import { ref,shallowReactive,shallowRef } from "vue";
import { getmsg } from '/@/api/project/index';


import { ElMessage } from 'element-plus'

const textarea =ref("");

const buttonText =ref("Send");

const sendDisabled =shallowRef(false);

const sendChat = (data) => {
    let prompt = textarea.value;
    if(prompt!=''){
        textarea.value='';
        ElMessage({
        message: '已发送请等待.',
        type: 'success',
    })
    sendDisabled.value = true;
    getmsg(prompt).then((response) => {
        activities.splice(0,0,
            {
                content: "Robot: " + response.msg,
                timestamp: new Date(),
                userType:'1',
                size: "large",
                type: "primary",
                icon: MoreFilled
            }, {
                content: `You: ${prompt}`,
                timestamp: new Date(),
                userType:'2',
                size: "large",
                color: "#0bbd87",
                icon: CircleCheck,
            }
        );
	});
    
    console.log('数组', activities);
}

}


 

let activities = shallowReactive([

  {

    content: "Robot: 你可以开始跟我对话了",

    timestamp: new Date(),

    size: "large",

    userType:'1',

    type: "primary",

    icon: CircleCheck,

  },

]);

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-main>
        <div class=".mainContent" style="overflow: hidden; ">
            <div style="overflow-y: scroll; height: calc(450px - 80px);">
                <el-timeline style="font-size:large">
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :icon="activity.icon"
                        :type="activity.type"
                        :color="activity.color"
                        :size="activity.size"
                        :hollow="activity.hollow"
                        :timestamp="activity.timestamp"
                    >
                        <el-icon v-if="activity.userType==2"><User /></el-icon> 
                        <el-icon v-if="activity.userType==1"><Bell /></el-icon>  
                        <span v-html="activity.content"></span>
                    </el-timeline-item>
                </el-timeline>
            </div>
                <el-input
                    v-model="textarea"
                    placeholder="输入查询内容"
                    class="input-with-select"
                    >
                    <template #append>
                        <el-button @click="sendChat" :icon="Promotion" />
                    </template>
                    </el-input>

        </div>
    </el-main>
    </el-container>
  </div>
</template>
<style scoped>

header {

  line-height: 1.5;

  max-height: 100vh;

}

.logo {

  display: block;

  margin: 0 auto 2rem;

}

nav {

  width: 100%;

  font-size: 12px;

  text-align: center;

  margin-top: 2rem;

}

nav a.router-link-exact-active {

  color: var(--color-text);

}

nav a.router-link-exact-active:hover {

  background-color: transparent;

}

nav a {

  display: inline-block;

  padding: 0 1rem;

  border-left: 1px solid var(--color-border);

}

nav a:first-of-type {

  border: 0;

}

/* @media (min-width: 1024px) {

  header {

    display: flex;

    place-items: center;

    padding-right: calc(var(--section-gap) / 2);

  }

  .logo {

    margin: 0 2rem 0 0;

  }

  header .wrapper {

    display: flex;

    place-items: flex-start;

    flex-wrap: wrap;

  }

  nav {

    text-align: left;

    margin-left: -1rem;

    font-size: 1rem;

    padding: 1rem 0;

    margin-top: 1rem;

  }

} */

</style>